/*
 * @Author: sea 
 * @Date: 2020-04-17 09:19:30 
 * @Last Modified by: sea
 * @Last Modified time: 2020-04-17 09:38:08
 */

/* 屏幕宽度在340px至410px时，基准尺寸使用20px */
html{
    font-size: 20px;
}
/* 屏幕宽度小于340px时，基准尺寸使用18px */
@media (max-width: 340px){
    html{
        font-size: 18px;
    }
}

/* 屏幕宽度大于410px时，基准尺寸使用22px */
@media (min-width: 410px){
    html{
        font-size: 22px;
    }
}
/* 
max-width: 640px; 设置 body 最宽只能 640px，这是为了在一些超宽的屏幕（如：横屏的ipad）上，页面不至于被撑得太宽，我们这里限定屏幕像素大于 640px 的时候，只显示到 640px 这么宽。
margin: 0 auto; 当屏幕超宽时，保证内容区能水平居中。
background: #f8f8f8; 给页面设置一个浅灰色背景。
overflow-x: hidden; 横轴方向如果出现了超宽的元素，设置为隐藏，这样就能防止在X轴方向上出现滚动条。
-webkit-overflow-scrolling: touch; 在 ios 系统上，可以让滚动元素带有弹性，滚动的更顺滑。注意这条样式只是 webkit 内核提供的，只在基于 webkit 内核的浏览器上有效。 
*/
body{
    max-width: 640px;
    margin: 0 auto;
    background: #f8f8f8;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.sea-mask{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.5);
    z-index: 300;
}